<template>
  <div class="home">
    <div class="title">微上墙</div>
    <div class="number">当前在线人数:{{numClients}}</div>

    <div class="barrage-wap">
      <div class="barrage" :ref="'bar'+index" v-for="(msg,index) in msgList" :key="index" :style="msg.style">
        <div class="headerimg"><img :src="msg.headimgurl" alt="用户头像"></div>
        <div style="marginRight:6px">{{msg.nickname}}:</div>
        <div>{{msg.msg}}</div>
      </div>
    </div>

  </div>
</template>

<script>
import SocketIO from "socket.io-client"
export default {
  data () {
    return {
      msg: '',
      msgList: [],
      socket: null,
      numClients: 0
    }
  },

  methods: {
    //rgb颜色随机
    rgb () {
      let r = Math.floor(Math.random() * 256)
      let g = Math.floor(Math.random() * 256)
      let b = Math.floor(Math.random() * 256)
      return 'rgb(' + r + ',' + g + ',' + b + ',.6)'
    },
    getRandomNumberByRange (start, end) {
      return Math.floor(Math.random() * (end - start) + start)
    },
    // 初始化数据 并添加数据
    initDataPush (data) {
      data.style = {
        backgroundColor: this.rgb(),
        top: Math.floor(Math.random() * 700) + 'px',
        animationDuration: this.getRandomNumberByRange(12, 16) + 's'
      }
      // 控制弹幕数量
      if (this.msgList.length > 30) {
        this.msgList.splice(0, 1, data)
        return false
      }
      this.msgList.push(data)
    }
  },
  mounted () {
    this.msgList.forEach(item => {
      item.style = {
        backgroundColor: this.rgb(),
        top: this.top()
      }
    })
    this.$forceUpdate()

    // 连接socket
    this.socket = SocketIO('ws://127.0.0.1:3000')
    this.socket.on('getMsgFromServe', (data) => {
      console.log(data)
      this.initDataPush(data)
    })
    this.socket.on('numClients', (numClients) => {
      this.numClients = numClients
    })
  }
}
</script>

<style lang="scss">
.home {
  position: relative;
  height: 100%;
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
  overflow: hidden;
  .title {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 42px;
    letter-spacing: 10px;
    color: #fff;
    font-weight: 800;
  }
  .number {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
  }
  .barrage-wap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 80%;
    overflow: hidden;
    // background-color: #fff;
    .barrage {
      position: absolute;
      padding: 0 20px;
      box-sizing: content-box;
      font-size: 22px;
      color: #fff;
      border-radius: 4px;
      opacity: 0.7;
      height: 46px;
      display: flex;
      align-content: center;
      justify-content: center;
      animation-name: move;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      // animation: move 16s linear infinite;
      white-space: nowrap;
      transition: 0.3s all;
      cursor: pointer;
      div {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
      }
      .headerimg {
        height: 100%;
        overflow: hidden;
        margin-right: 6px;
        img {
          border-radius: 50%;
          width: 36px;
          height: 36px;
        }
      }
    }
    .barrage:hover {
      background: #000;
      opacity: 1;
      animation-play-state: paused;
    }
  }
}

@keyframes move {
  from {
    right: calc(-50%);
  }
  to {
    right: calc(100%);
  }
}
</style>

